<template>
    <div class="madp-organization">
        <basic-container>
            <div class="madp-clearfix">
                <div class="madp-right-content">
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="clearInput">清空</el-button>
                </div>
                <div class="madp-left-content-one">
                    <el-input maxlength="20" v-model.trim="name" @input="name = name.replace(/\s+/g, '')" placeholder="请输入组织名称" class="madp-left-content-input"></el-input>
                </div>
            </div>
            <div class="madp-last">
                <span class="madp-last-syn">最后一次同步时间:{{ syncTime }}</span>
            </div>
            <!-- 表格 -->
            <div>
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    ref="table"
                    row-key="id"
                    @expand-change="handleExpandChange"
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                >
                    <el-table-column prop="departmentPath" align="center" label="序号">
                        <template slot-scope="scope">
                            <span v-text="getIndex(scope.$index)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="组织架构名称"></el-table-column>
                    <el-table-column prop="level" align="center" label="部门级别"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <span class="madp-table-column">
                                <el-button @click="showRow(scope.row)" type="text">查看成员</el-button>
                            </span>
                            <span v-if="scope.row.children.length > 0">
                                <el-button @click="handleClick(scope.row)" type="text">
                                    <span v-show="!scope.row.isOpen">展开</span>
                                    <span v-show="scope.row.isOpen">收起</span>
                                </el-button>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="madp-pagination-wrap">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
            <!-- 查看成员 -->
            <el-dialog title="查看成员" :visible.sync="memberDialog" width="1000px" :close-on-click-modal="false">
                <el-form label-width="90px" class="madp-search-form">
                    <el-form-item label="员工号">
                        <el-input placeholder="请输入员工号" maxlength="20" v-model.trim="searchForm.employeeId"></el-input>
                    </el-form-item>
                    <el-form-item label="成员姓名">
                        <el-input placeholder="请输入成员姓名" maxlength="20" v-model.trim="searchForm.employeeName"></el-input>
                    </el-form-item>
                    <div class="madp-search-form-right">
                        <el-button @click="handleSearch2" type="primary">搜索</el-button>
                        <el-button @click="handleReset2">清空</el-button>
                    </div>
                </el-form>
                <el-table
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    :stripe="true"
                    :data="memberTableData"
                    border
                    v-loading="tableloading"
                >
                    <el-table-column property="employeeId" label="员工号" align="center"></el-table-column>
                    <el-table-column property="employeeName" label="姓名" align="center"></el-table-column>
                    <el-table-column property="phone" label="手机号" align="center">
                        <template slot-scope="scope">{{ scope.row.phone || '--' }}</template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="madp-pagination"
                    background
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="page2.currentPage"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page2.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page2.total"
                ></el-pagination>
                <span slot="footer">
                    <el-button type="primary" @click="memberDialog = false">确定</el-button>
                </span>
            </el-dialog>
        </basic-container>
    </div>
</template>

<script>
import { getWorkDepartment, getShowEmployee } from '@/api/company-manage/organization';
import { putSyncEmployee } from '@/api/company-manage/member-manage';
export default {
    name: 'organization',
    data() {
        return {
            // loading开关
            loading: true,
            // 时间
            syncTime: '',
            // 分页
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            page2: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            // 姓名
            name: '',
            // 表格内容
            tableData: [],
            // 弹窗开关
            memberDialog: false,
            // 成员表格内容
            memberTableData: [],
            // 表格loading开关
            tableloading: false,
            // 部门id
            departmentId: '',
            // 查询表单
            searchForm: {}
        };
    },
    mounted() {
        this.getList(this.page);
    },
    methods: {
        //获取表格序号
        getIndex($index) {
            return (this.page.currentPage - 1) * this.page.pageSize + $index + 1;
        },
        /*列表*/
        getList(page, params) {
            let obj = Object.assign({ current: page.currentPage, size: page.pageSize }, params);
            getWorkDepartment(obj).then((res) => {
                if (res.data.code === 0) {
                    this.tableData = [];
                    this.$nextTick(() => {
                        this.tableData = res.data.data.records;
                        this.page.total = res.data.data.total;
                        this.syncTime = res.data.data.extraProps.syncTime;
                        this.loading = false;
                    });
                }
            });
        },
        //搜索
        handleSearch() {
            this.page.currentPage = 1;
            this.getList(this.page, { name: this.name });
        },
        handleSearch2() {
            this.getList2();
        },
        handleReset2() {
            this.searchForm = {};
            this.getList2();
        },
        // 清空所有输入框
        clearInput() {
            this.name = '';
            this.getList(this.page);
        },
        // 点击查看
        showRow(row) {
            this.searchForm = {};
            this.page2 = {
                currentPage: 1,
                pageSize: 10,
                total: 0
            };
            this.departmentId = row.departmentId;
            this.tableloading = true;
            let obj = {
                current: this.page2.currentPage,
                pageSize: this.page2.pageSize,
                departmentId: row.departmentId
            };
            getShowEmployee(obj)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.memberTableData = res.data.data.records;
                        this.page2.total = res.data.data.total;
                    }
                    this.tableloading = false;
                })
                .catch(() => {
                    this.tableloading = false;
                });
            this.memberDialog = true;
        },
        getList2(data) {
            if (!data) {
                this.page2.currentPage = 1;
                this.page2.pageSize = 10;
            }
            let obj = {
                current: this.page2.currentPage,
                pageSize: this.page2.pageSize,
                departmentId: this.departmentId
            };
            if (this.searchForm.employeeId) obj.employeeId = this.searchForm.employeeId;
            if (this.searchForm.employeeName) obj.employeeName = this.searchForm.employeeName;
            this.tableloading = true;
            getShowEmployee(obj)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.memberTableData = res.data.data.records;
                        this.page2.total = res.data.data.total;
                    }
                    this.tableloading = false;
                })
                .catch(() => {
                    this.tableloading = false;
                });
        },
        // 点击收起
        handleClick(row) {
            let $table = this.$refs.table;
            $table.toggleRowExpansion(row);
        },
        handleExpandChange(row, e) {
            row.isOpen = e === true;
        },
        // 每页条数变更
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.getList(this.page, { name: this.name });
        },
        // 页码变更
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage;
            this.getList(this.page, { name: this.name });
        },
        // 每页条数变更
        handleSizeChange2(pageSize) {
            this.page2.pageSize = pageSize;
            this.getList2(1);
        },
        // 页码变更
        handleCurrentChange2(currentPage) {
            this.page2.currentPage = currentPage;
            this.getList2(1);
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-organization {
    // 头部输入框
    .madp-left-content-one {
        float: right;
        margin-right: 10px;
    }
    .madp-left-content-input {
        width: 200px;
    }
    // 头部按钮
    .madp-right-content {
        float: right;

        .madp-more {
            cursor: pointer;
            color: #409eff;
            margin-left: 20px;
        }
    }

    // 分页
    .madp-pagination-wrap {
        float: right;
        margin-top: 30px;
        margin-bottom: 18px;
    }

    .madp-own-table {
        .madp-text-style {
            text-align: center;
        }
    }
}

.madp-clearfix:after {
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
}

/deep/ .el-table [class*='el-table__row--level'] .el-table__expand-icon {
    display: none;
}

.madp-last {
    margin-top: 10px;
    .madp-last-syn {
        float: right;
        line-height: 45px;
    }
}
.madp-table-column {
    margin-right: 5px;
}
.madp-search-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    &-right {
        margin-left: 10px;
    }
}
</style>
